<template>
  <el-card class="box-card">
    <div>
      <!-- 搜索框 -->
      <el-form
        ref="dataFrom"
        :inline="true"
        :model="dataFrom"
        class="demo-form-inline"
      >
        <el-form-item label="搜索好友">
          <el-input
            v-model="dataFrom.username"
            clearable
            placeholder="账号/姓名/备注"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="getDataListByName"
          >查询
          </el-button
          >
        </el-form-item>
      </el-form>
      <!-- 角色数据表单 -->
      <div>
        <el-row>
          <el-col
            v-for="item in dataList"
            :key="item.userB"
            :offset="1"
            :span="10"
          >
            <el-card class="box-card" style="margin-top: 10px;">
              <div class="user">
                <img id="picture" :src="'data:image/png;base64,'+item.image"/>
                <div class="userinfo">
                  <p>
                    账号:<span>{{ item.userB }}</span>
                    <br/>
                    名称:<span>{{ item.notes === "" || item.notes === null ? item.name : item.notes }}</span>
                  </p>
                  <br/>
                  <el-button
                    :disabled=false
                    class="button"
                    type="primary"
                    @click="chat(item)"
                  >私聊
                  </el-button
                  >
                  <el-button
                    class="button"
                    type="success"
                    @click="setFriend(item)"
                  >编辑
                  </el-button
                  >
                  <el-button
                    class="button"
                    type="danger"
                    @click="delFriend(item)"
                  >删除
                  </el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- 编辑按钮打开的页面 -->
      <el-dialog
        :visible.sync="dialogFormVisibleChange"
        title="编辑备注"
        width="35%"
      >
        <el-form :model="formChange">
          <el-form-item label="备注" label-width="120px">
            <el-input
              v-model="formChange.notes"
              autocomplete="off"
              placeholder="formChange.notes"
              style="width: 300px"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleChange = false">取 消</el-button>
          <el-button type="primary" @click="onSubmitChange()">保 存</el-button>
        </div>
      </el-dialog>
      <!-- 页号 -->
      <el-pagination
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[4, 10, 20, 50, 100]"
        :total="totalPage"
        layout="total ,sizes,prev,pager,next,jumper"
        style="margin-top: 30px"
        @size-change="sizeChangeHandle"
        @current-change="CurrentChangeHandle"
      >
      </el-pagination>
    </div>
  </el-card>
</template>
<script>
export default {
  name: "FriendList",
  data() {
    return {
      username: sessionStorage.getItem("username"),
      dataFrom: {
        username: "",
      },
      form: {
        username: "",
      },
      //编辑
      formChange: {},
      dataList: [], //页面展示的数据集合
      pageIndex: 1,
      pageSize: 4,
      totalPage: 0,
      begin: 0,
      end: this.pageSize - 1,
      dialogFormVisible: false, //默认关闭新建好友界面
      dialogFormVisibleChange: false, //默认关闭编辑好友界面
      search: {
        userA: "",
        userB: "",
      },
    };
  },
  methods: {
    //改变数组大小
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.getDataList();
    },
    //改变当前页号
    CurrentChangeHandle(val) {
      this.pageIndex = val;
      this.dataList = [];
      this.getDataList();
    },
    //删除
    delFriend(item) {
      this.$http.post("/friend/del", item).then(() => {
        this.getDataList()
      })
    },
    chat(item) {
    },
    //编辑页面的确认键
    onSubmitChange() {
      this.$http.post("/friend/update", this.formChange).then(() => {
        //关闭编辑好友界面
        this.dialogFormVisibleChange = false;
        //刷新页面
        this.getDataList();
      });
    }, cutDataList(res) {
      this.dataList = []
      const data = this.$cutPageDataList(res)
      this.dataList = data.dataList
      this.totalPage = data.totalPage
      this.dataList.forEach(f => {
        f.image = this.$unzip(f["image_byte"]["byte"])
      })
    },
    //查询所有数据
    getDataList() {
      const pageInfo = this.$getPageInfo(this.pageSize, this.pageIndex)
      this.$http.post("/friend/getList", pageInfo).then((res) => {
        this.cutDataList(res);
      });
    },
    //查询单条数据
    getDataListByName() {
      const name = this.dataFrom.username;
      if (name.length !== 0) {
        const pageInfo = this.$getPageInfo(this.pageSize, this.pageIndex)
        this.$http.post("/friend/getList/search/" + name, pageInfo).then((res) => {
          if (res["list"].length !== 0) {
            this.cutDataList(res);
          } else {
            this.$message.warning("没有符合搜索条件的数据")
          }
        });
      } else {
        //无条件搜索，视为搜索全部
        this.getDataList();
      }
    },
    //编辑按钮
    setFriend(item) {
      this.dialogFormVisibleChange = true; //打开编辑好友界面
      //回显数据
      this.formChange = item;
      // console.log(this.formChange)
    },
    //取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
  },
  mounted() {
    this.getDataList();
  },
};
</script>

<style lang="less" scoped>
.user {
  border-bottom: 1px solid #999;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  // padding-top: ;
  .userinfo {
    margin-left: 40px;

    .name {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .access {
      color: #999;
      margin-top: 0;
    }
  }

  img {
    margin-left: 40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
}

.login-info {
  p {
    font-size: 14px;
    color: #999999;
    line-height: 28px;

    span {
      color: #666666;
      margin-left: 20px;
    }
  }
}

.system_bulletin {
  .system_title {
    font-size: 22px;
    color: #000000;
  }

  .system_context {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border: 1px #f2f2f2 solid;
    display: flex;
    justify-content: space-between;
    align-content: center;
  }
}
</style>
